<template>
  <el-dialog ref="wkDialog" :visible="visible" :append-to-body="true" :close-on-click-modal="false" width="700px"
    @close="handleCancel">
    <span slot="title" class="el-dialog__title">
      {{ title }}
      <i v-if="helpObj" class="wk wk-icon-fill-help wk-help-tips" :data-type="helpObj.dataType"
        :data-id="helpObj.dataId" />
    </span>
    <div class="form-add-dialog-body">
      <el-form ref="crmForm" :model="fieldForm" :rules="fieldRules" :validate-on-rule-change="false" class="wk-form"
        label-position="top">
        <wk-form-item v-for="(item, index) in fieldList" :key="item.fieldName + index" :index="index" :field-from="fieldForm"
          :item="item" :disabled="item.disabled" style-percent="50%" @change="formChange">
          <template slot-scope="{ data }">
            <v-distpicker v-if="data && data.formType == 'area' || data.formType == 'city'"
              :province="fieldForm[data.field].province" :city="fieldForm[data.field].city" :disabled="data.disabled"
              hide-area @province="selectProvince($event, data)" @city="selectCity($event, data)" />
          </template>
        </wk-form-item>
      </el-form>
      <slot />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button v-debounce="handleConfirm" type="primary">保存</el-button>
      <el-button @click.native="handleCancel">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  hrmEmployeeFieldVerifyAPI
} from '@/api/hrm/employee'

import WkFormItem from '@/components/NewCom/WkForm/WkFormItem'

import ElDialogLoadingMixin from '@/mixins/ElDialogLoading'
import CustomFieldsMixin from '@/mixins/CustomFields'
import VDistpicker from '@/components/VDistpicker'

export default {

  // 自定义字段弹窗新建
  name: 'CustomFormAddDialog',
  components: {
    WkFormItem,
    VDistpicker
  },
  mixins: [ElDialogLoadingMixin, CustomFieldsMixin],
  props: {
    id: [String, Number],
    title: String,
    fields: Array,
    helpObj: Object,
    visible: {
      type: Boolean,
      required: true,
      default: false
    },
    isExamine: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      fieldList: [],
      fieldForm: {},
      fieldRules: {},
      tempPolTimeObject: {}
    }
  },
  computed: {
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getField()
        }
      },
      immediate: true
    },
    fieldForm: {
      handler() {
        if (this.title === '编辑基本信息'){
          if (this.fieldForm.pol_id === '群众' || this.fieldForm.pol_id === '团员'){
            const index = this.fieldList.findIndex(item => item.fieldName === 'pol_time');
            if (index !== -1) {
              this.fieldList.splice(index, 1);
              this.fieldForm.pol_time = null;
            }
          }else {
            const index = this.fieldList.findIndex(item => item.fieldName === 'pol_time');
            if (index === -1) {
              this.fieldList.splice(6, 0, this.tempPolTimeObject)
            }
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    /**
     * 获取数据
     */
    getField() {
      const list = this.fields
      const assistIds = this.getFormAssistIds(list)

      const fieldList = []
      const fieldRules = {}
      const fieldForm = {}
      list.forEach(item => {
        const temp = this.getFormItemDefaultProperty(item, false)
        temp.show = !assistIds.includes(item.formAssistId)

        // 是否能编辑权限
        if (temp.show) {
          fieldRules[temp.field] = this.getRules(item)
        }

        // 是否可编辑
        if (!temp.hasOwnProperty('disabled')) {
          temp.disabled = false
        }

        // 特殊字段允许多选
        if (typeof temp.radio !== 'boolean') {
          this.getItemRadio(item, temp)
        }

        // 获取默认值
        if (temp.show) {
          fieldForm[temp.field] = this.getItemValue(item, null, this.id ? 'update' : 'save')
        }
        fieldList.push(temp)
      })

      this.fieldList = fieldList
      this.fieldForm = fieldForm
      this.fieldRules = fieldRules
      const index = this.fieldList.findIndex(item => item.fieldName === 'pol_time');
      if (index !== -1) {
        this.tempPolTimeObject = this.fieldList[index];
      }
    },

    /**
     * 验证唯一
     */
    UniquePromise({ field, value }) {
      // this.action 详情
      return this.getUniquePromise(field, value, this.action)
    },

    /**
     * 验证唯一
     */
    getUniquePromise(field, value, detail) {
      return new Promise((resolve, reject) => {
        var validatesParams = {}
        validatesParams.fieldId = field.fieldId
        validatesParams.id = this.id
        validatesParams.value = this.getRealParams(field, value)

        hrmEmployeeFieldVerifyAPI(validatesParams).then(res => {
          // status 1 通过 0
          const resData = res.data || {}
          if (resData.status === 1) {
            resolve()
          } else {
            reject(`${field.name}已存在`)
          }
        }).catch(() => {
          reject()
        })
      })
    },

    /**
     * 取消选择
     */
    handleCancel() {
      this.$emit('update:visible', false)
    },

    /**
     * 点击确定
     */
    handleConfirm() {
      const crmForm = this.$refs.crmForm
      crmForm.validate(valid => {
        if (valid) {
          const params = this.getSubmiteParams([].concat.apply([], this.fieldList), this.fieldForm, ['isFixed'])
          params.isExamine = this.isExamine
          this.$emit('pass', params)
        } else {
          // 提示第一个error
          this.getFormErrorMessage(crmForm)
          return false
        }
      })
    },

    /**
     * change 事件
     */
    formChange(field, index, value, valueList) {
      if ([
        'select',
        'checkbox'
      ].includes(field.formType) &&
        field.remark === 'options_type' &&
        field.optionsData) {
        const { fieldForm, fieldRules } = this.getFormContentByOptionsChange(this.fieldList, this.fieldForm)
        this.fieldForm = fieldForm
        this.fieldRules = fieldRules
      }

      if (field.name == '身份证号' && value.length == 18) {
        var genderCode = value.substring(16, 17);
        let sexs = genderCode % 2 === 0 ? "女" : "男"
        let data = this.fieldList.find(o => {
          return o.name == '性别'
        })
        let sex = data.setting.find(o => {
          return o.name == sexs
        })
        if (data) {
          this.fieldForm[data.fieldName] = sex.value
        }

        let birthDay = value.substr(6, 4) + "-" + value.substr(10, 2) + "-" + value.substr(12, 2);
        let birth = this.fieldList.find(o => {
          return o.name == '出生日期'
        })
        if (birth) {
          this.fieldForm[birth.fieldName] = birthDay
        }
      }
    },

    /**
     * 选择省市
     */
    selectProvince(data, item) {
      this.fieldForm[item.field].province = data.value
    },

    selectCity(data, item) {
      this.fieldForm[item.field].city = data.value
    }
  }
}
</script>

<style lang="scss" scoped>
.form-add-dialog-body {
  max-height: 55vh;
  overflow-x: hidden;
  overflow-y: auto;

  .wk-form {
    display: flex;
    flex-wrap: wrap;

    ::v-deep.is-detail_table {
      width: 100% !important;
    }
  }
}
</style>
